<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>lhgDialog4.0.0 扩展功能演示</title>
<link type="text/css" rel="stylesheet" href="js/prettify/prettify.css" />
<link type="text/css" rel="stylesheet" href="js/demo.css" />
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/prettify/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
	// JavaScript Document
var _search = window.location.search,lhg_skins,_Skin_tmpl;
if(_search){
	lhg_skins = _search.split("=")[1];
}
document.write('<scr'+'ipt src="../lhgdialog.js?skin=' + (lhg_skins || 'default') +'"></sc'+'ript>');
var _Skin_tmpl  = function (data) {
	var html = ['<table class="skintabs" style="width:480px"><tbody>'];
	for (var i = 0, length = data.length; i < length; i ++) {
		html.push('<tr class="');
		html.push(i%2 ? 'odd' : '');
		html.push('"><th style="width:7em"><a href="?skin=');
		html.push(data[i].name);
		html.push('">');
		html.push(data[i].name);
		html.push('</a></th><td>');
		html.push(data[i].about);
		html.push('</td></tr>');
	};
	html.push('</tbody></table>');
	return html.join('');
}([
	{ name: 'default', about: '默认皮肤,简单的纯CSS灰色皮肤。' },
	{ name: 'qq2011', about: '仿QQ2011弹出窗口的蓝色渐变皮肤，纯CSS' },
	{ name: 'blue', about: '蓝色简约风格皮肤,大气十足，纯CSS' },
	{ name: 'discuz', about: 'discuz论坛极简皮肤，相当实用，纯CSS' },
	{ name: 'idialog', about: '苹果电脑风格的弹窗皮肤，很不错的(包含图片)' }
]);
	
	/** 多皮肤演示 */
	function sk1(){
		var a = $.dialog({
			id: "sk1",
			title: "丰富多彩的皮肤",
			content: _Skin_tmpl
		});
	}
	function op_b0(){
		var b = $.dialog({
			id: "op_b00",
			title: "放一个视频",
			content:' <embed src="http://player.youku.com/player.php/sid/XMzI4MTYwNDcy/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" wmode="transparent"></embed> ',
			padding: 0	
		});
	}
	function op_bmap(){
		var map = $.dialog({
			id: "op_map",
			title: "google地图",
			content: "url:http://maps.google.com/maps?hl=zh-CN&ie=UTF8&ll=37.0625,-95.677068&spn=39.371738,86.396484&t=m&z=4&vpsrc=1",
			padding: 0,
			width: 450,
			height: 400
		});	
	}
	function op_b1(){
		var b = lhgdialog.alert("这是一个alert消息哦");
	}
	function op_b2(){
		var b = lhgdialog.confirm("你确定要使用lhgDialog4.0.0么？",
			function(){
				lhgdialog.tips("你点击了确定按钮。");
			},function(){
				lhgdialog.tips("你点击了关闭");
			}
		);
	}
	function op_b3(){
		lhgdialog.prompt("你愿意为 lhgDialog 4.0.0 支付多少授权费？",
			function(val){
				lhgdialog.tips("感谢你的买单,你支付了：" + val + " $(美元),美元哦", 3);
			},
			"请输入数字"
		);	
	}
	function op_b4(){
		lhgdialog.tips("非常感谢你们长期以来，对LHGCore.JS的支持。", 3);	
	}
	function op_b5(){
		lhgdialog.tips("正在加载数据，请等待", 3, "loading.gif");	
	}
	function op_b6(){
		lhgdialog.tips("登录成功，3秒后自动跳转到主页").time(3, function(){
			var iTimeoutId_0 = setTimeout(function(){
				window.location.href = "http://bbs.lhgcore.com/";
				clearTimeout(iTimeoutId_0);
			}, 3000);
		});
		
	}
	function op6(){
    	var n = $.dialog.notice({title:'lhgdialog',content:'欢迎使用lhgdialog弹出窗口组件',width:220,time:5});
	}
</script>
</head>
<body>
<div class="title_top r5px">
	<ul>
    	<li class="button orange"><a target="_blank" href="http://bbs.lhgcore.com/">返回论坛</a></li>
        <li class="button blue"><a target="_blank" href="http://bbs.lhgcore.com/thread-49-1-1.html">返回帖子</a></li>
        <li class="button blue"><a target="_blank" href="http://bbs.lhgcore.com/thread-51-1-1.html ">提交Bug</a></li>
		<li class="button blue"><a href="../index.html">在线演示</a></li>
    	<li class="button green"><a href="extents.html">扩展演示</a></li>
        <li class="button blue"><a href="valuedemo.html">传值演示</a></li>
        <li class="button blue"><a href="javascript:;" onclick="sk1()">切换皮肤</a></li>
        <li class="button orange"><a href="../api/api.html" target="_blank">API文档</a></li>
    </ul>
</div>
<div class="container r5px">
<div id="gads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-4209163873016654";
/* gads_demo_首页2 */
google_ad_slot = "4818004114";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
    <div class="header"><h1 class="colb f1"><span class="colr">lhgDailog4正式发布beta1版本，</span>感谢大家长期的支持。</h1></div>
    <div class="article">
        <h2>窗口的各种扩展功能在线演示示例</h2>
        <ol>
        	<li>
            	<h3>放一个falsh视频给大家看下</h3>
                <pre class="prettyprint">
function op_b0(){
    var b = $.dialog({
        id: "op_b00",
        title: "放一个视频",
        content:' &lt;embed src="http://player.youku.com/player.php/sid/XMzI4MTYwNDcy/v.swf" 
        			allowFullScreen="true" quality="high" width="480" height="400" align="middle" 
                    allowScriptAccess="always" type="application/x-shockwave-flash" wmode="transparent"&gt;&lt;/embed&gt; ',
        padding: 0	
    });
}				</pre>
				<pre class="prettyprint">
/** 关于flash无法被遮罩的问题，可以这样参考一下解决方案： */

IE浏览器下可用：&lt;param name="wmode" value="transparent" /&gt;

firefox下可用：&lt;embed src="YourFlash.swf" wmode="transparent" &gt;
                </pre>
                <button class="button green" onclick="op_b0()">运行»</button>
            </li>
            <li>
            	<h3>放一个地图给大家</h3>
                <pre class="prettyprint">
var map = $.dialog({
    id: "op_map",
    title: "google地图",
    content: "url:http://maps.google.com/maps?hl=zh-CN&ie=UTF8
    	&ll=37.0625,-95.677068&spn=39.371738,86.396484&t=m&z=4&vpsrc=1",
    padding: 0,
    width: 450,
    height: 400
});
                </pre>
                <button class="button green" onclick="op_bmap()">运行地图</button>
            </li>
        	<li>
            	<h3>Alert消息演示</h3>
            	<pre class="prettyprint">
/**
 * 警告
 * @param	{String}	消息内容
 * @param	{String}	消息图片，默认是warning.png
 */
API: lhgdialog.alert = function( content, icon );
                </pre>
                <pre class="prettyprint">
var b = lhgdialog.alert("这是一个alert消息哦");
				</pre>
                <button class="button green" onclick="op_b1()">运行»</button>
            </li>
             <li>
            	<h3>Comfim消息演示</h3>
                <pre class="prettyprint">
/**
 * 确认
 * @param	{String}	消息内容
 * @param	{Function}	确定按钮回调函数
 * @param	{Function}	取消按钮回调函数
 */
lhgdialog.confirm = function( content, yes, no );
				</pre>
            	<pre class="prettyprint">
var b = lhgdialog.confirm("你确定要使用lhgDialog4.0.0么？",
    function(){
        lhgdialog.tips("你点击了确定按钮。");
    },function(){
        lhgdialog.tips("你点击了关闭");
    }
);				</pre>
                <button class="button green" onclick="op_b2()">运行»</button>
            </li>
            <li>
            	<h3>Prompt 提问提示框</h3>
            	<pre class="prettyprint">
/**
 * 提问
 * @param	{String}	提问内容
 * @param	{Function}	回调函数. 接收参数：输入值
 * @param	{String}	默认值
 */
lhgdialog.prompt = function( content, yes, value );
				</pre>
                <pre class="prettyprint">
lhgdialog.prompt("你愿意为 lhgDialog 4.0.0 支付多少授权费？",
    function(val){
        lhgdialog.tips("感谢你的买单,你支付了：" + val +" RMB(人民币)", 3);
    },
    "请输入数字"
);				</pre>
                <button class="button green" onclick="op_b3()">运行»</button>
            </li>
            <li>
            	<h3>notice通知扩展</h3>
            	<pre class="prettyprint">
/**
 * notice 右下角通知扩展
 * @param {options} 独立配置
 * 注意：由于notice通知扩展使用了animate动画功能，lhgcore.js简化了该功能，如使用此扩展，请使用jQuery最新版本。
 */
$.dialog.notice = function( options )
                </pre>
                <pre class="prettyprint">
function op6(){
	$.dialog.notice({title:'lhgdialog',content:'欢迎使用lhgdialog弹出窗口组件',width:220,time:5});
}
                </pre>
                <button class="button green" onclick="op6()">运行»</button>
                <h3 class="colr">扩展文件下载，请点击页面上方的返回帖子，即可下载附件</h3>
            </li>
             <li>
            	<h3>Tips 提示框</h3>
            	<pre class="prettyprint">
/**
 * 短暂提示
 * @param	{String}	提示内容
 * @param	{Number}	显示时间 (默认1.5秒)
 */
lhgdialog.tips = function( content, time );
				</pre>
                <pre class="prettyprint">
lhgdialog.tips("非常感谢你们长期以来，对LHGCore.JS的支持。", 3);

lhgdialog.tips("正在加载数据，请等待", 3, "loading.gif");		
                </pre>
                <button class="button green" onclick="op_b4()">运行»</button>
                <button class="button green" onclick="op_b5()">运行»</button>
            </li>
            <li>
          		<h3>用tips提示登录成功，然后自动跳转到论坛首页</h3>
                <pre class="prettyprint">
lhgdialog.tips("登录成功，3秒后自动跳转到主页").time(3, function(){
    var iTimeoutId_0 = setTimeout(function(){
        window.location.href = "http://bbs.lhgcore.com/";	/** 如果是ifarme中使用，可以使用 window.top.locatioin.href  */
        clearTimeout(iTimeoutId_0);
    }, 3000);
});				</pre>
                <button class="button green" onClick="op_b6()">运行»</button>
            </li>
        </ol>
        
 		<br/>
        	 <h2>lhgDialog 4.x 更多扩展功能，请期待。。。。</h2>
        <br/>
        <h2>更多API组合DEMO，请自行阅读API之后编写测试。</h2><br/>
<div id="gads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-4209163873016654";
/* gads_demo_首页4 */
google_ad_slot = "7579909069";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="header"><h1 class="colr">感谢你们对LHGCore.JS的长期支持，继续支持我们，我们将做的更好！！！</h1></div>
    </div>
    <div class="footer"></div>

</div>
<script type="text/javascript">prettyPrint();</script>
<script src="../extents.js" type="text/javascript"></script>
</body>
